<template>
  <PageContainer>
    <view class="container">
      <Header title="浏览记录">
        <view class="tips">
          <text class="ali-icon icon-tips" style="font-size: 32rpx"></text>
          <text class="tip-text">仅统计本小程序用户浏览记录</text>
        </view>
        <view class="search-box">
          <view class="t-search-box">
            <TSearch @confirm="handleTSearch" placeholder="搜索姓名/单位"></TSearch>
          </view>
        </view>
      </Header>

      <Paglist
        v-model="dataList"
        :is-init-api="false"
        :parame="parame"
        @register="register"
        :scroll-top-bottom="260"
        :is-show-loadmore="dataList.length >= 1"
        :isPullDownRefres="false"
      >
        <template v-for="v in dataList" :key="v.id">
          <view class="content">
            <PresonItemBrowsingHistory
              :data="v"
              @detail="toDetail(v.appUserInfoId)"
            ></PresonItemBrowsingHistory>
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';

  import TSearch from '@/components/TSearch/index.vue';
  import { provide, ref } from 'vue';
  import PresonItemBrowsingHistory from '../components/PresonItemBrowsingHistory.vue';
  import FilterDrawer from '../components/FilterDrawer.vue';
  import { navigateTo, onLoad } from '@/router';
  import { activityManagerBrowseList, getActivityRegisterList } from '@/api/activity';
  import type {
    IActivityManagerBrowseList,
    IActivityManagerBrowseListQuery,
    IActivityRegister,
    IActivityRegisterQuery,
  } from '@/api/activity/types';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { ApprovalStatusEnum } from '@/enums/activityStatusEnum';
  import { onPullDownRefresh } from '@dcloudio/uni-app';

  const activityId = ref<number>();
  onLoad<'activityBrowsingHistory'>(async (op) => {
    activityId.value = op.activityId;
    parame.value.activityId = op.activityId;
    await refresh();
  });

  // 列表

  const [register, { refresh }] = useConList();
  const dataList = ref<IActivityManagerBrowseList[]>([]);
  const parame = ref<IActivityManagerBrowseListQuery>({
    activityId: 0,
    keyWord: '',
  });

  const handleTSearch = (keyWord: string) => {
    parame.value.keyWord = keyWord;
    refresh();
  };

  provide('api', async (obj: IActivityManagerBrowseListQuery) => {
    const res = await activityManagerBrowseList(obj);
    return res;
  });

  onPullDownRefresh(async () => {
    await refresh();
  });

  const toDetail = (appUserInfoId: number) => {
    navigateTo({
      name: 'activityBrowsingHistoryDetail',
      options: {
        appUserInfoId,
        activityId: activityId.value!,
      },
    });
  };
</script>

<style lang="scss" scoped>
  .container {
    .tips {
      background-color: #fff4e7;
      display: flex;
      align-items: center;
      gap: 16rpx;
      padding: 20rpx 32rpx;
      color: #e29942;
      .tip-text {
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
    .search-box {
      background-color: #ffffff;
      display: flex;
      gap: 32rpx;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 32rpx;

      .t-search-box {
        height: 72rpx;
        flex: 1;
      }
    }

    ::v-deep .list-box {
      display: flex;
      flex-direction: column;
      padding: 24rpx;
      gap: 16rpx;
    }
  }
</style>
